<template>
  <div class="blogs">
    <div class="content-header">
      <h1>个人中心<small>友链管理</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item >后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>友链管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--中间内容-->
    <div class="app-container">
		<div class="box">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
				<el-row>
					<el-col :span="8">
					  <el-form-item label="博客主题" prop="friend_theme">
						<el-input v-model.trim="ruleForm.friend_theme"></el-input>
					  </el-form-item>						
					</el-col>
					<el-col :span="12">
						<el-form-item label="博客图像" prop="friend_image">
						  <el-input v-model.trim="ruleForm.friend_image"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="20">
						<el-form-item label="博客地址" prop="friend_url">
						  <el-input v-model.trim="ruleForm.friend_url"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10">
						<el-form-item label="博客简介" prop="friend_introduce">
						  <el-input type="textarea" v-model="ruleForm.friend_introduce"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
			    <el-button @click="resetForm('ruleForm')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
    </div>
    <br>
    <br>
  </div>
</template>

<script>
	export default {
	  data() {
	      return {
				ruleForm: {
				  friend_image: '',
				  friend_introduce: '',
				  friend_theme: '',
				  friend_url: '',
				},
				rules: {
				  friend_image: [
					{ required: true, message: '请输入博客的图像(url)', trigger: 'blur' },
					{ min: 3, max: 500, message: '长度在 3 到 500 个字符', trigger: 'blur' },
				  ],
				  friend_introduce: [
					{ required: true, message: '请输入博客简介', trigger: 'blur' },
					{ min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
				  ],
				  friend_theme: [
					{ required: true, message: '请输入博客主题', trigger: 'blur' },
					{ min: 3, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }
				  ],
				  friend_url: [
					{ required: true, message: '请输入朋友博客地址', trigger: 'blur' },
					{ min: 3, max: 500, message: '长度在 3 到 500 个字符', trigger: 'blur' }
				  ]
				}
	      };
	  },
	  methods: {
	    submitForm(formName) {
			var that=this
	      this.$refs[formName].validate((valid) => {
				//对数据的数据进行检验
	        if (valid) {
				  //判断用户是否具有该权限
				  var user=JSON.parse(sessionStorage.getItem("user_info"))
				  if(user.power==2){
					  //校验通过 进行数据添加
					  //120.26.196.115  localhost
					  axios.post("http://"+that.$store.state.host+":8181/blog_friend/saveFriend",that.ruleForm).then(function(res){
						  //判断是否插入成功！！！！
						  if(res.data.status==true){
							that.$message.success(res.data.message);
							that.resetForm(formName)
						  }else{
							that.$message.error(res.data.message);  
						  }  
					  })
				  }else{
					  that.$message.warning('你不具有该权限!');
				  }
	        } else {
	          that.$message.error('校验失败，请检查输入格式!');
	          return false;
	        }
	      });
	    },
	    resetForm(formName) {
	      this.$refs[formName].resetFields();
	    }
	  }
	}
</script>

<style>
</style>
